{extend name="public/common"}

{block name="style"}
<title>点对点教育VIP学员_录入确认</title>
<link rel="stylesheet" href="__HOME__/css/write/detail.css">
<style>
    .nomessage{
        text-align: center;
        position:fixed;
        top:50%;
        left:50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
    }
    .nomessage>img{
        width:56%;
        margin-bottom:4vw;
    }
    .nomessage>span{
        font-size: 1.7rem;
        color:#ccc;
    }
    .closed{
        display: inline-block;
        background: url("__HOME__/images/common/close.png");
        width: 6vw;
        height: 6vw;
        background-size: 6vw 6vw;
        z-index: 999;
        margin-left: 76vw;
        margin-top: -8vw;
    }
    .tip {
        height: 40px;
        text-align: center;
        line-height: 40px;
        color: #c1c1c1;
        position: relative;
        margin-top: -21vw;
    }
</style>
{/block}
{block name="body"}
<div class="scroll"  style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0" >
    <div class="comment">
        <div class="lists">
            {empty name="detail"}
            <div class="nomessage">
                <img src="__HOME__/images/sign/5.png" alt="" ><br>
                <span>抱歉，暂无记录</span>
            </div>
            {else/}
            {volist name="detail" id="co"}
            <div class="list clear">
                <div class="fl">
                    <img src="{$co.teacherid|get_header}" alt="用户" class="user">
                </div>
                <div class="fl mid">
                    <div class="content" >{$co.content}</div>
                    <div class="time">{$co.create_time|time_format="Y-m-d H:i"}</div>
                    <span class="closed" data-id="{$co.id}"></span>
                </div>
            </div>
            {/volist}
            {/empty}
        </div>
        <div class="tip"></div>
    </div>
</div>
<div class="bottom clear" onclick="send(this,{$id})">
    <div class="myword fl">
        <input type="text" placeholder="请输入您的批阅！" id="send" disabled>
    </div>
</div>

{/block}

{block name="script"}
<script src="__HOME__/js/reset.js"></script>
<script>
    //关闭分享
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
    var scrollNow = true;//判断下拉请求是否执行中.false为正在请求
    $(function(){
        $('title' ).text('点对点教育VIP学员_录入确认');
        if($(".list").length == 15){
            $('.tip').text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',loadScroll);
        }else{
            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",loadScroll);
            $('.tip').hide();
        }
    });
    //发送评论
    var send = function(e,id){
        swal({
            title: "",
            text: "请输入批阅内容！",
            type: "input",
            showCancelButton: true,
            animation: "slide-from-top",
            inputPlaceholder: "（300字以内）",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnConfirm: false
        },
        function(inputValue){
            if (inputValue === false) {
                return false
            }else if (inputValue === "")
            {
                swal.showInputError("请输入批阅");
                return false
            }else if(inputValue.length>300){
                swal.showInputError("批阅不得多于300字");
            }else{
                var content = utf16toEntities(inputValue);
                $.ajax({
                    type:"post",
                    url:"{:Url('Write/sign')}",
                    data:{
                        id:id,
                        content:content
                    },
                    beforeSend:function(){
                        swal({
                            title: ' ',
                            text: '提交中...',
                            showConfirmButton:false
                        });
                    },
                    success:function(msg){
                        if (msg.code == 1){
                            var data = msg.data;
                            $('.nomessage').hide();
                            var html = '';
                            html += '<div class="list clear">' +
                                    '<div class="fl">' +
                                    '<img src="' + data.header + '" alt="用户头像" class="user">' +
                                    '</div>' +
                                    '<div class="fl mid">' +
                                    '<div class="content">' + inputValue + '</div>' +
                                    '<div class="time">' + data.time + '</div>' +
                                    '<span class="closed" data-id="'+data.id+'"></span>'+
                                    '</div>' +
                                    '</div>';
                            $('.lists' ).prepend(html);
                            inputValue="";
                            swal({
                                title: ' ',
                                text: '批阅成功',
                                type: 'success',
                                confirmButtonText:'确定',
                                timer:1500
                            });
                        }else{
                            swal({
                                title: ' ',
                                text: '批阅失败~请重试',
                                type: 'success',
                                confirmButtonText:'确定',
                                timer:1500
                            });
                            window.location.reload();
                        }
                    }
                });
            }
        });
    };

    //加载更多评论
    function loadScroll(){
        var len = $(".list" ).length;
        var id = '{$id}';
        var tip = $(".tip");
        if(scrollNow){
            scrollNow = false;
            $('.tip').text('上拉加载更多');
            $.ajax({
                type:"post",
                url:"{:Url('Write/moremore')}",
                data:{
                    id:id,
                    length:len
                },
                beforeSend: function(XMLHttpRequest){
                    $('.tip').text('加载中...');
                },
                success:function(data){
                    if(data.code == 1){
                        addComment(data);
                        if(data.data.length == 15){
                            $('.tip').text('上拉加载更多');
                        }else{
                            $('.tip').text('没有更多了');
                            document.getElementsByClassName("scroll")[0].removeEventListener("scroll",loadScroll);
                        }
                    }else{
                        $('.tip').text('没有更多了');
                        document.getElementsByClassName("scroll")[0].removeEventListener("scroll",loadScroll);
                    }
                    scrollNow = true;
                }
            })
        }
    }
    //添加评论
    function addComment(data){
        //is_like : 1为已点赞 0为未点赞
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            html += '<div class="list clear">' +
                    '<div class="fl">' +
                    '<img src="' + list.header + '" alt="用户" class="user">' +
                    '</div>' +
                    '<div class="fl mid">' +
                    '<div class="content">' + list.content + '</div>' +
                    '<div class="time">' + list.time + '</div>' +
                    '<span class="closed" data-id="'+list.id+'"></span>'+
                    '</div>';
            html+=
                    '</div>';
        }
        $(".lists" ).append(html);
    }
    $(".closed").click(function() {
        var id = $(this).attr('data-id');
        swal({
            title: "",
            text:"确定删除吗？",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            closeOnConfirm: false
        }, function() {
            $.ajax({
                type: "post",
                url: "{:Url('Write/dele')}",
                data: {
                    id: id
                },
                beforeSend: function (XMLHttpRequest) {
                },
                success: function (data) {
                    if (data.code == 1) {
                        swal({
                            title: ' ',
                            text: '删除成功',
                            type: 'success',
                            confirmButtonText: '确定',
                            allowOutsideClick: false,
                            timer: 1500
                        }, function () {
                            window.location.reload();
                        });
                    } else {
                        swal({
                            title: ' ',
                            text: '删除失败，请重试',
                            allowOutsideClick: false,
                            type: 'error',
                            confirmButtonText: '确定',
                            timer: 1500
                        })
                    }
                }
            });
        });
    });
    /**
     * 用于把用utf16编码的字符转换成实体字符，以供后台存储
     * @param  {string} str 将要转换的字符串，其中含有utf16字符将被自动检出
     * @return {string}     转换后的字符串，utf16字符将被转换成&#xxxx;形式的实体字符
     */
    function utf16toEntities(str) {
        var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
        str = str.replace(patt, function(char){
            var H, L, code;
            if (char.length===2) {
                H = char.charCodeAt(0); // 取出高位
                L = char.charCodeAt(1); // 取出低位
                code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // 转换算法
                return "&#" + code + ";";
            } else {
                return char;
            }
        });
        return str;
    }
</script>
{/block}